﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>横向选项卡</title>
    <meta charset="utf-8" />
    <link href="../../../assets/css/style.css" rel="stylesheet" />


</head>
<body id="body">

    <div class="page-wraper">

        <div class="mui-tabs">
            <ul class="tabs-hd clearfix">
                <li><a href="#home" class="active">显示信息</a></li>
                <li><a href="#panel">系统参数</a></li>
                <li><a href="#copy">版权说明</a></li>
            </ul>
            <div class="tabs-body">
                <div id="home" class="tabs-panel active">这里是显示信息的内容</div>
                <div id="panel" class="tabs-panel">这里是系统参数的内容</div>
                <div id="copy" class="tabs-panel">这里是版权说明的内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">面板</h3>
                <div class="panel-options">

                </div>
            </div>
            <div class="panel-body">
                <pre>
                <code data-language="html">//HTML代码如下
<div class="mui-tabs">
    <ul class="tabs-hd clearfix">
        <li><a href="#home" class="active">显示信息</a></li>
        <li><a href="#panel">系统参数</a></li>
        <li><a href="#copy">版权说明</a></li>
    </ul>
    <div class="tabs-body">
        <div id="home" class="tabs-panel active">这里是显示信息的内容</div>
        <div id="panel" class="tabs-panel">这里是系统参数的内容</div>
        <div id="copy" class="tabs-panel">这里是版权说明的内容</div>
    </div>
</div>

//引入js文件，自动执行代码，不需要做其它任何多余的操作，文件引用地址
<script src="../../assets/js/plugins/jquery.mui.js"></script>

//需要注意的几点：
//这段代码<li><a href="#panel">系统参数</a></li>当中的 href="#panel" 和下面 id="panel" 相对应，必须填写
            </code>
    </pre>
            </div>
        </div>

    </div>

    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>

</body>
</html>
